<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.scroll {
			position: relative;
			width: 830px;
			height: 130px;
			border: 10px solid #000;
			margin: 100px auto;
			overflow: hidden;
		}

		.scroll .inner {
			position: relative;
			width: 5000px;
		}

		.scroll ul {
			position: absolute;
			top: 0;
			left: 0;
			height: 130px;
			list-style: none;
		}

		.scroll ul li {
			float: left;
			margin-right: 10px;
		}
	</style>
</head>

<body>
	<div class="scroll" id="scroll">
		<div class="inner" id="inner">
			<ul id="munit">
				<li><img src="images/shuzi/0.png" alt="" /></li>
				<li><img src="images/shuzi/1.png" alt="" /></li>
				<li><img src="images/shuzi/2.png" alt="" /></li>
				<li><img src="images/shuzi/3.png" alt="" /></li>
				<li><img src="images/shuzi/4.png" alt="" /></li>
				<li><img src="images/shuzi/5.png" alt="" /></li>
				<li><img src="images/shuzi/6.png" alt="" /></li>
			</ul>
		</div>
	</div>
	<script>
			var scroll = document.getElementById("scroll");
		var munit = document.getElementById("munit");
		var inner = document.getElementById("inner");
		var lis = document.querySelectorAll(".cs");
		// 克隆列表方法1
			var ul2 = munit.cloneNode(true);
			ul2.id = "munit1"
			ul2.style.left = "1830px";
			console.log(inner);
			inner.appendChild(ul2);
		// 克隆列表方法2
			// munit.innerHTML =munit.innerHTML+munit.innerHTML
		// 开始位置
		var starleft=0;
		var starleft1=1830;
		// 结束位置
		var endleft
		// 计数器
		var set

		document.onmouseover = function () {
			clearInterval(set);
			set = window.setInterval(function () {
				starleft -= 1;
				starleft1 -= 1;
				if (starleft< -1830) {
					starleft = 1830;
				}
				if (starleft1< -1830) {
					starleft1 = 1830;
				}
				munit.style.left = starleft+"px";
				ul2.style.left = starleft1+"px";
			},10)
		}
		scroll.onmousemove = function () {
			clearInterval(set);
		}
	</script>
</body>

</html>